﻿<script setup lang="ts" name="MenuManagement">
import MenuAddEdit from './components/menuAddEdit.vue'
import MenuButtonDrawer from './components/menuButtonDrawer.vue'
import { base } from '@/api/public'
import { menu } from '@/api/settings'
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
import { cloneDeep } from 'lodash-es'
import { transformI18n } from '@/plugins/i18n'
import { StorageEnum } from '@/enums/storageEnums'
const { getDictionaryEntryData } = useDictionaryEntry()
const statusList = ref([])
const pageData:any = ref({
  listData: {
    data: [],
    catalogData: []
  },
  searchData: {
    title: '',
    status: 1
  }
})
// 重置页面数据
const resetPageData = () => {
  pageData.value.listData.data = []
  pageData.value.listData.total = 0
}
// 获取当前查询条件下的数据
const getInitData = () => {
  resetPageData()
  const result: any = {}
  result.title = pageData.value.searchData.title
  result.status = pageData.value.searchData.status
  menu.search(result, { config: { showLoading: false, mockEnable: true } }).then((res:any) => {
    console.log(res)
    if (res.data && res.data.length > 0) {
      setTimeout(() => {
        const menuResult: any = {}
        menuResult.menuID = ''
        menuResult.label = ''
        menuResult.value = ''
        menuResult.requestType = ''
        base.menuPermit(menuResult, { config: { showLoading: false, mockEnable: true } }).then((res2:any) => {
          console.log(res2)
          if (res2.data && res2.data.length > 0) {
            setTimeout(() => {
              res.data.forEach((item) => {
                item.menuPermissionsButtonList = []
                if (!item.isCatalog) {
                  res2.data.forEach((current) => {
                    if (item.id === current.menuID) {
                      item.menuPermissionsButtonList.push(current)
                    }
                  })
                }
              })
              pageData.value.listData.data = dataToTree(res.data)
              const catalogList = res.data.filter((item) => { return item.isCatalog })
              pageData.value.listData.catalogData = dataToTree(catalogList)
              console.log(pageData.value.listData.data)
            }, 1000)
          }
        })
      }, 1000)
    }
  })
}
const dataToTree = (data) => {
  const dataArr = cloneDeep(data)
  const parents = dataArr.filter(function (item: any) {
    return item.pid === 0
  })
  const children = dataArr.filter(function (item: any) {
    return item.pid !== 0
  })
  parents.forEach((item) => {
    item.level = 1
  })
  // 递归处理动态路由层级
  convert(parents, children)
  return parents
}
const convert = (parents: any, children: any) => {
  parents.forEach(function (item: any) {
    item.value = item.id
    item.label = item.title
    item.children = []
    children.forEach(function (current: any, index: any) {
      if (current.pid === item.id) {
        current.level = item.level + 1
        const temp = children.filter(function (v: any, idx: any) {
          return idx !== index
        }) // 删除已匹配项，这里未使用JSON.parse(JSON.stringify(children))是因为路由的component已经是函数形式，再格式化后，模块导入功能丢失，会导致找不到模块
        item.children.push(current)
        convert([current], temp) // 递归
      }
    })
  })
}
// 查询条件重置
const resetSearch = () => {
  pageData.value.searchData.title = ''
  pageData.value.searchData.status = 1
  getInitData()
}

const menuDialog = ref(null)
// 新增事件
const add = () => {
  menuDialog.value.showDialog()
}
// 编辑事件
const edit = (item) => {
  menuDialog.value.showDialog(item)
}

const deleteRow = (v) => {
  const msg = transformI18n('page.确定删除吗？', true)
  ElMessageBox.alert(msg, transformI18n('moduleTitle.警告', true), {
    showCancelButton: true,
    confirmButtonText: transformI18n('buttons.buttonConfirm', true),
    cancelButtonText: transformI18n('buttons.buttonCancel', true),
    type: 'warning',
    callback: (action) => {
      if (action === 'confirm') {
        ElMessage({
          type: 'info',
          message: `操作: 点击了确认`
        })
      } else {
        ElMessage({
          type: 'info',
          message: `操作: 点击了取消`
        })
      }
    }
  })
}

const menuButtonDrawer = ref(null)
const settingMenuButton = (v) => {
  console.log(v)
  menuButtonDrawer.value.showDrawer(v)
}

const getStatusList = async () => {
  statusList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'enable_number'
  })
}
getStatusList()
onMounted(() => {
  getInitData()
})
</script>

<template>
  <page-wrap direction="column">
    <el-form :inline="true">
      <el-form-item :label="$t('page.菜单名称')">
        <el-input v-model="pageData.searchData.title" :placeholder="$t('placeholders.请输入') + $t('page.菜单名称')" />
      </el-form-item>
      <el-form-item :label="$t('page.状态')">
        <el-radio-group class="radio-button" v-model="pageData.searchData.status">
          <el-radio-button v-for="(item, index) in statusList" :key="index" :label="item.value">{{ $t('page.' + item.label) }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getInitData">{{ $t('buttons.buttonSearch') }}</el-button>
        <el-button icon="Refresh" @click="resetSearch">{{ $t('buttons.buttonReset') }}</el-button>
        <el-button type="success" icon="Plus" @click="add()">{{ $t('buttons.buttonCreate') }}{{ $t('page.菜单') }}</el-button>
      </el-form-item>
    </el-form>
    <div class="flex-1 table-layout">
      <div class="table-wrap">
        <el-table :data="pageData.listData.data" border :default-expand-all="false" row-key="id">
          <el-table-column type="index" :label="$t('page.序号')" width="60" fixed="left" />
          <el-table-column prop="title" :label="$t('page.菜单名称')" min-width="200" fixed="left">
            <template #default="scope">
              {{ transformI18n('menus.' + scope.row.title, true) }}
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" width="60" fixed="left" />
          <el-table-column prop="route" :label="$t('page.菜单标识')" min-width="160" />
          <el-table-column prop="icon" :label="$t('page.图标')" width="60" align="center">
            <template #default="scope">
              <SvgIcon :icon="scope.row.icon"></SvgIcon>
            </template>
          </el-table-column>
          <el-table-column prop="badge" :label="$t('page.徽章')" width="90" align="center">
            <template #default="scope">
              <el-tag type="danger" effect="dark" size="small" v-if="scope.row.badge !== ''">{{ scope.row.badge }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sort" :label="$t('page.排序')" width="60" align="center" />
          <el-table-column prop="menuPermissionsButtonList" :label="$t('page.权限按钮')" width="270">
            <template #default="scope">
              <el-tag v-for="(item, index) in scope.row.menuPermissionsButtonList" :key="index" :type="item.tagColor === 'primary' ? '' : item.tagColor">{{ transformI18n('menus.' + item.label, true) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isCatalog" :label="$t('page.侧边可见')" width="100" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.showLink ? 'success' : 'danger'">{{ scope.row.showLink ? $t('page.是') : $t('page.否') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="dot" :label="$t('page.是否热点')" width="100" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.dot ? 'success' : 'danger'">{{ scope.row.dot ? $t('page.是') : $t('page.否') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isCatalog" :label="$t('page.是否目录')" width="100" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.isCatalog ? 'success' : 'danger'">{{ scope.row.isCatalog ? $t('page.是') : $t('page.否') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="keepAlive" :label="$t('page.是否缓存')" width="100" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.keepAlive ? 'success' : 'danger'">{{ scope.row.keepAlive ? $t('page.是') : $t('page.否') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isFixed" :label="$t('page.是否固定')" width="100" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.isFixed ? 'success' : 'danger'">{{ scope.row.isFixed ? $t('page.是') : $t('page.否') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" :label="$t('page.状态')" width="80" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? $t('page.启用') : $t('page.停用') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="transitionName" :label="$t('page.过场动画')" width="120" align="center" />
          <el-table-column prop="path" :label="$t('page.组件路径')" min-width="200" />
          <el-table-column prop="url" :label="$t('page.菜单链接')" min-width="200" />
          <el-table-column prop="redirect" :label="$t('page.重定向')" min-width="200" />
          <el-table-column prop="remark" :label="$t('page.备注')" min-width="240" />
          <el-table-column prop="operate" :label="$t('page.操作')" width="240" align="center" fixed="right">
            <template #default="scope">
              <el-button type="primary" icon="Edit" @click="edit(scope.row)"></el-button>
              <el-button type="danger" icon="Delete" @click="deleteRow(scope.row)"></el-button>
              <el-button type="warning" v-if="!scope.row.isCatalog" @click="settingMenuButton(scope.row)">{{ $t('buttons.菜单按钮') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <MenuAddEdit ref="menuDialog" :catalogList="pageData.listData.catalogData"></MenuAddEdit>
    <MenuButtonDrawer ref="menuButtonDrawer"></MenuButtonDrawer>
  </page-wrap>
</template>

<style scoped lang="scss">
.table-layout {
  position: relative;
  margin: var(--el-space) 0 0;

  .table-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .el-table {
      width: 100%;
      height: 100%;

      :deep(.el-table__placeholder) {
        display: inline;
      }

      .el-tag {
        margin: 2px;
      }
    }
  }
}

.el-pagination {
  align-items: center;
  justify-content: flex-end;
  margin: var(--el-space) 0 0;
}
</style>
